<template>
    <div>
        <el-dialog center :before-close="close" :title="win ? '添加菜单' : '编辑菜单'" :visible.sync="isShow">
            <el-form ref="menuForm" :rules="rules" :model="menu">
                <el-form-item :label-width="formLabelWidth" prop="title" label="菜单名称" class="
                    inp">
                    <el-input v-model="menu.title" placeholder="请输入内容" clearable></el-input>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth" prop="pid" label="上级菜单">
                    <el-select @change="changePid" v-model="menu.pid" placeholder="请选择上级菜单">
                        <el-option label="顶级菜单" :value="0"></el-option>
                        <el-option v-for="item in getMenu" :key="item.id" :label="item.title" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth" label="菜单类型">
                    <el-radio disabled v-model="menu.type" :label="1">目录</el-radio>
                    <el-radio disabled v-model="menu.type" :label="2">菜单</el-radio>
                </el-form-item>
                <el-form-item v-if="menu.type==1" :label-width="formLabelWidth" label="菜单图标">
                    <!-- <el-input v-model="menu.icon"></el-input> -->
                     <el-select v-model="menu.icon">
                        <el-option v-for="item in iconList" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-else :label-width="formLabelWidth" label="菜单地址">
                    <!-- <el-input v-model="menu.url"></el-input> -->
                    <el-select v-model="menu.url">
                        <el-option v-for="item in indexRouters" :key="item.path" :label="item.name" :value="item.path"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth" label="状态">
                    <el-switch v-model="menu.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button @click="confirm" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 引入封装的添加接口
import { menuAdd, menuInfo, menuEdit } from '../../request/api'
// 辅助性函数
import { mapGetters, mapActions } from 'vuex';
// 引入路由路线
import {indexRouters} from '../../router'
export default {
    // 接收父组件的数据
    props: ['isShow', 'win'],
    data() {
        return {
            value1: true, // 开关状态
            radio: '1',  // 单选按钮默认值
            value: '',
            menu: {
                pid: 0, //上级分类编号  注意：顶级菜单-0
                title: "", //菜单名称
                icon: "", //图标
                type: 1, //类型 1目录2菜单
                url: "", //菜单地址
                status: 1, //状态   1正常2禁用   number类型
            },
            formLabelWidth: "120px",
            //验证规则
            rules: {
                title: [
                    // required必须的 必传项
                    { required: true, message: "请输入菜单名称", trigger: "blur" },
                    { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
                ],
                pid: [
                    { required: true, message: "请选择上级菜单", trigger: "change" }
                ],
            },
            id: '',
            indexRouters,  //路由路线(菜单地址)
            iconList:['el-icon-setting','el-icon-goods','el-icon-s-flag','el-icon-bell','el-icon-menu','el-icon-location-information']  //菜单图标
        };
    },
    computed: {
        ...mapGetters({
            getMenu: "menu/getMenuList"
        })
    },
    methods: {
        // 联动菜单选择
        changePid(){
            this.menu.type = this.menu.pid == 0 ? 1 : 2
        },
        // 获取一条信息
        getInfo(id) {
            // console.log(id,'idididididid');
            menuInfo({
                id
            }).then(res => {
                console.log(res, '查询的一条信息');
                // 将相应的数据复制给 this.menu  做回显
                this.menu = res.list
                // 因为编辑的接口参数需要，给menu 添加一个ID属性
                this.menu.id = id
            })
        },
        // 获取列表事件
        ...mapActions({
            getMenuList: "menu/changeMenuListAction"
        }),
        // 传状态给父组件，控制弹窗隐藏,同时绑定给关闭按钮
        close() {
            this.$emit('close', false)
            // this.reset()
            // 清空校验, 重置
            this.$refs.menuForm.resetFields()
        },
        // 确定事件
        confirm() {
            this.$refs.menuForm.validate(async (flag) => {
                console.log(flag);
                if (flag) {
                    // 利用this.win 来确定使用的接口
                    console.log(this.menu, "菜单的表单对象");
                    if (this.win) {
                        // 调用添加接口
                        let res = await menuAdd(this.menu)
                        if (res.code == 200) {
                            this.$message.success(res.msg)
                            // 更新列表
                            this.getMenuList()
                            // 关闭弹窗，调用封装好的方法
                            this.close()
                        } else {
                            this.$message.error(res.msg)
                        }
                    } else {
                        // 调用编辑接口
                        menuEdit(this.menu)
                            .then(res => {
                                if (res.code == 200) {
                                    this.$message.success(res.msg)
                                    // 更新列表
                                    this.getMenuList()
                                    // 关闭弹窗，调用封装好的方法
                                    this.close()
                                } else {
                                    this.$message.error(res.msg)
                                }

                            })
                    }

                } else {
                    console.log('验证失败');
                }
            })
        }
    },
};
</script>

<style  lang="less" scoped>
</style>
